<template>
  <div>
    <form @submit.prevent="createPost">
      <div>
        <label for="userId">UserId</label>
        <input type="text" id="userId" v-model="postData.userId" />
      </div>
      <div>
        <label for="title">Title</label>
        <input type="text" id="title" v-model="postData.title" />
      </div>
      <div>
        <label for="body">Title</label>
        <textarea id="body" rows="6" cols="22" v-model="postData.body" />
      </div>
      <button type="submit">Create Post</button>
    </form>
    <div v-for="post of posts" :key="post.id">
      <h2>{{ post.id }} {{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import axios from 'axios'

import type { Posts } from '@/models/axios/posts'

const posts = ref<Array<Posts>>([])
const postData = ref<Posts>({
  id: 0,
  userId: 0,
  title: '',
  body: '',
})

const createPost = () => {
  axios.post('https://jsonplaceholder.typicode.com/posts', postData.value).then((response) => {
    console.log('post response...', response.data)
  })
}

onMounted(() => {
  axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
    posts.value = response.data
    console.log(response.data, posts)
  })
})
</script>
